<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{border: 1px solid #333;}
		</style>
	</head>
	<body>
		<canvas width="600" height="400"></canvas>
	</body>
	<script type="text/javascript">
		let canvas=document.querySelector("canvas");
		let ctx=canvas.getContext("2d");
		
		//设置线性渐变
		// let linearGradient=ctx.createLinearGradient(0,0,200,0)
		// let linearGradient=ctx.createLinearGradient(0,0,0,200)
		let linearGradient=ctx.createLinearGradient(0,0,200,200)
		linearGradient.addColorStop(0,"red")
		linearGradient.addColorStop(0.5,"orange")
		linearGradient.addColorStop(1,"green")
		

		
		//绘制矩形
		// ctx.fillStyle="red"
		ctx.fillStyle=linearGradient;
		ctx.fillRect(0,0,200,200)

	</script>
</html>